<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector('.populationecharts'))
  var data = [
    { name: 'title1', value: 4 },
    { name: 'title2', value: 4 },
    { name: 'title3', value: 4 },
    { name: 'title4', value: 4 },
    { name: 'title5', value: 4 },
    { name: 'title6', value: 4 }
  ]
  var count = 0
  const option = {

    // color: ['#3c13a8', '#4d59e6', '#5c63c5', '#0472d9', '#42947f', '#4eb2d4', '#badcff', '#a3d0ff', '#8dc5ff', '#73b8ff', '#4aa3ff', '#1e8dff', '#007eff'
    //   , '#1678dc', '#246eba', '#4172a5', '#5582b0', '#d2f7ff', '#daecff'],

    color: ['#1fcea5', '#2da0d6', '#00f3c7', '#167775', '#19414e', '#2a8798'],

    series: [
      {
        type: 'pie',
        selectedMode: 'single',
        // selectedOffset: 30,//圆环延展长度
        center: ['50%', '58%'],
        radius: ['40%', '55%'],
        label: {
          normal: {
            show: true,
            position: 'outside',
            formatter: '{b}: {c}',  // 格式化标签，显示名称和数值
            textStyle: {
              color: '#d4e7ef',
              fontSize: 10
            }
          }
        },
        labelLine: {
          normal: {
            show: true,  // 显示连接线
            length: 20,  // 连接线长度
            lineStyle: {
              color: '#05969b',  // 连接线颜色
              width: 1,  // 连接线宽度
              type: 'solid'  // 连接线类型
            }
          }
        },
        data: data
      }
    ]
  }
  setInterval(function () {
    var r = count % data.length
    option.series[0].data[r].selected = false
    count++
    var s = count % data.length
    option.series[0].data[s].selected = true
    myChart.setOption(option, true)
  }, 3000)
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
})
</script>

<template>
  <div></div>
</template>

<style scoped></style>